<template>
  <div class="desktop-setting">
    <div style="font-size: 0.18rem; font-weight: bold; padding-left: 0.1rem">系统</div>
    <setting-card-wrapper title="通用">
      <setting-card-item title="显示缩放" :border="false">
        <n-slider
          style="min-width: 2rem"
          v-model:value="htmlFontSize"
          :min="90"
          :max="120"
          :step="1"
          @update-value="changeHtmlFontSize"
        />
      </setting-card-item>
    </setting-card-wrapper>
    <setting-card-wrapper title="程序栏">
      <setting-card-item title="置于屏幕上的位置">
        <n-select
          style="width: 0.7rem"
          size="tiny"
          v-model:value="dockPlacement"
          :options="dockPlacementOptions"
          @update-value="changeDockPlacement"
        />
      </setting-card-item>
      <setting-card-item title="自动隐藏和显示">
        <n-switch size="small" v-model:value="dockAutoHide" @update-value="changeDockAutoHide" />
      </setting-card-item>
      <setting-card-item title="dock大小" :border="false">
        <n-slider
          style="width: 2rem"
          :min="50"
          :max="90"
          v-model:value="dockSize"
          @update-value="changeDockSize"
        />
      </setting-card-item>
    </setting-card-wrapper>
    <setting-card-wrapper title="桌面">
      <setting-card-item title="图标排列方式">
        <n-select
          style="width: 0.95rem"
          size="tiny"
          v-model:value="mainPanelPlacement"
          :options="mainPanelPlacementOptions"
          @update-value="changeMainPanelPlacement"
        />
      </setting-card-item>
      <setting-card-item title="图标大小" :border="false">
        <n-slider style="width: 2rem" :min="40" :max="70" v-model:value="mainPanelItemSize" @update-value="changeMainPanelItemSize" />
      </setting-card-item>
    </setting-card-wrapper>
  </div>
</template>

<script lang="ts" setup>
import SettingCardWrapper from "@/application/theme-setting/components/setting-card/SettingCardWrapper.vue"
import SettingCardItem from "@/application/theme-setting/components/setting-card/SettingCardItem.vue"
import { ref } from "vue"
import { pxNumberToSize, sizeToPxNumber, useThemeStore } from "@/stores/theme"
import VariableName from "../../../stores/theme/variable-name"

const themeStore = useThemeStore()

//显示缩放
const htmlFontSize = ref(themeStore.getVariable(VariableName.Html.fontSize, sizeToPxNumber))

function changeHtmlFontSize(size: number) {
  themeStore.setVariable(VariableName.Html.fontSize, size + "px")
}

const selectOptionStyle = {
  "font-size": "0.12rem",
  "--n-option-height": "0.2rem"
}

//程序栏设置
const dockPlacementOptions = [
  {
    value: "left",
    label: "左侧",
    style: selectOptionStyle
  },
  {
    value: "bottom",
    label: "底部",
    style: selectOptionStyle
  },
  {
    value: "right",
    label: "右侧",
    style: selectOptionStyle
  }
]
const dockPlacement = ref(themeStore.getVariable(VariableName.Dock.placement))

function changeDockPlacement(placement: string) {
  themeStore.setVariable(VariableName.Dock.placement, placement)
}

const dockAutoHide = ref(themeStore.getVariable(VariableName.Dock.autoHide) === "true")

function changeDockAutoHide(value: boolean) {
  themeStore.setVariable(VariableName.Dock.autoHide, value + "")
}

const dockSize = ref(themeStore.getVariable(VariableName.Dock.size, sizeToPxNumber))

function changeDockSize(size: number) {
  themeStore.setVariable(VariableName.Dock.size, size, pxNumberToSize)
}

//桌面设置
const mainPanelPlacementOptions = [
  {
    value: "left",
    label: "从左开始",
    style: selectOptionStyle
  },
  {
    value: "right",
    label: "从右开始",
    style: selectOptionStyle
  }
]
const mainPanelPlacement = ref(themeStore.getVariable(VariableName.MainPanel.placement))

function changeMainPanelPlacement(placement: string) {
  themeStore.setVariable(VariableName.MainPanel.placement, placement)
}

const mainPanelItemSize = ref(themeStore.getVariable(VariableName.MainPanel.itemSize))

function changeMainPanelItemSize(size: number) {
  themeStore.setVariable(VariableName.MainPanel.itemSize, size, pxNumberToSize)
}
</script>

<style scoped lang="scss">
.desktop-setting {
  padding: 0.2rem;
}
</style>
